<template>
    <div class="bg">
        <p class="p1">十大扶持体系</p>
        <div class="container">
            <ul class="ul1">
                <li v-for="(item,index) in list" :key="index">
                    <p class="p2" v-if="index!==10">0{{index+1}}</p>
                    <p class="p2" v-if="index==10">10</p>
                    <img :src="item[0]" alt="" class="img1"><br>
                    <img src="../../assets/img/agent/17.png" alt="">
                    <p class="p3">{{item[1]}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
const img1 = require("../../assets/img/agent/16.png");
const img2 = require("../../assets/img/agent/18.png");
const img3 = require("../../assets/img/agent/19.png");
const img4 = require("../../assets/img/agent/20.png");
const img5 = require("../../assets/img/agent/21.png");
const img6 = require("../../assets/img/agent/4-4.png");
const img7 = require("../../assets/img/agent/23.png");
const img8 = require("../../assets/img/agent/24.png");
const img9 = require("../../assets/img/agent/25.png");
const img10 = require("../../assets/img/agent/26.png");
const img11 =  require("../../assets/img/agent/17.png");
export default {
  data() {
    return {
      list: [[img1,"物料提供"],[img2,"系统培训"],[img3,"市场推广"],
      [img4,"考核规范"],[img5,"分享答疑"],[img6,"会销支持"],[img7,"技术支持"],[img8,"1对1扶持"],[img9,"优秀代理商扶持"],[img10,"美辰新媒培训学员"]]
    };
  }
};
</script>
<style scoped>
.bg {
  width: 100%;
  height: 622px;
  background: url("../../assets/img/agent/15.png");
  margin-top: 70px;
  text-align: center;
  overflow: hidden;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
.p1 {
  color: #fff;
  font-size: 20px;
  margin-top: 80px;
}
.p2{
  color:#fff;
  opacity: 1;
  z-index:3;
  text-align: left;
  padding-left:10px;
  position: absolute;
}
.ul1 li {
  /* 224*5 1120 */
  width: 224px;
  height: 177px;
  /* background: rgb(211, 67, 67); */
  background:url('../../assets/img/agent/22.png');
  /* opacity: 0.1; */
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  position:relative;
  z-index:0;
}
.ul1 li:hover{
  background:#ee4041;
}
.img1{
  margin-top:30px;
  margin-bottom:20px;
}
.p3{
  color:#fff;
  margin-top:10px;
  font-size:16px;
}
.ul1 {
  margin-left: -20px;
}
</style>


